ログイン画面にグラスモーフィズムというおしゃんな見栄えを与える

#CSS

森亮介

2021.11.25

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

デザイン業界の流行り廃りはよくわからないですが、グラスモーフィズムを使ったWebのUIを見てかっこいいと思い真似をしたくなったのでやってみます。

グラスモーフィズム(Glassmorphism）とは、

透明感（背景ぼかしを使ったすりガラスのような効果)が特徴のエフェクトのようです。

こんな感じの見た目ですね。背景には鮮やかなものを使うことが多そうでした。

やってみる

WebのUIで試していくので、HTMLとCSSを使います。

このログインフォームをグラスモーフィズムにしてみます。

Glassmorphism CSS Generator, Toolbox - Glassmorphism Generator, Glass Morphism などたくさんのジェネレーターがあるので、これらを参考にしていきます。

ぼかし具合(Blur)と不透明度(Transparency)を調整して作っていきます。

背景

ちょっとグラデーションのかかった明るめの色にしてみます。

body {
    background: linear-gradient(45deg, #FC466B, #3F5EFB);
    height: 100vh;
    font-family: "Montserrat", sans-serif;
}

スタイル

ぼかし具合(Blur)

backdrop-filter: blur( ７px );
-webkit-backdrop-filter: blur( 7px );

と

不透明度(Transparency)

background-color: rgba(255, 255, 255, 0.35);

を調整して、いい感じにします。

なんかそれっぽくなりました。

満足です。

最後に

ログイン画面はAuth0のユニバーサルログインのページをカスタマイズしました

今回試したHTMLとCSSは以下

<!DOCTYPE html>
<html>
  <head>
    {%- auth0:head -%}
    <style>
        body {
            background: linear-gradient(45deg, #FC466B, #3F5EFB);
            height: 100vh;
            font-family: "Montserrat", sans-serif;
        }
        ._widget section._prompt-box-outer>div:nth-of-type(1) {
            background-color: rgba(255, 255, 255, 0.35);
            backdrop-filter: blur(7px);
            -webkit-backdrop-filter: blur(7px);
            border: 1px solid rgba(255, 255, 255, 0.18);
            box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
            -webkit-box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
            border-radius: 12px;
            -webkit-border-radius: 12px;
            color: rgb(255, 255, 255);
        }

        ._widget section p {
            font-weight: 500;
            color: #fff;
            opacity: 0.7;
            font-size: 1.4rem;
            margin-top: 0;
            margin-bottom: 60px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
        }

        .input {
            background: transparent;
        }

        div.text, div.password {
            color: #fff;
            background-color: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.1);
            width: 100%;
            border-radius: 15px;
            backdrop-filter: blur(10px);
        }
        ::placeholder {
            color: #cdd;
        }

        .js-required {
            background-color: rgb(255, 255, 255, 0.01) !important;
        }

        button {
            background-color: rgba(255,255,255,0.1) !important;
            border: 1px solid rgba(255,255,255,0.1) !important;
            backdrop-filter: blur(4.5px) !important;
            -webkit-backdrop-filter: blur( 4.5px );
        }
    </style>
  </head>
  <body class="_widget-auto-layout">
    <div class="prompt-wrapper">
        {%- auth0:widget -%}
    </div>
  </body>
</html>

このコードをSet template for New Universal Login Experience APIで更新しました

グラスモーフィズムのジェネレーターがたくさんあるので、興味のある人は色々と試してみてください